<template>
  <div class="">
    <el-button type="primary" size="default" @click="showdialog"
      >设置</el-button
    >

    <el-button type="primary" size="default" @click="test()">test</el-button>

    <el-dialog
      title=""
      :visible.sync="showdia"
      width="60%"
      @close="showdia = false"
    >
      <div id="container2" style="height: 450px; width: 900px"></div>
      <span slot="footer">
        <el-button @click="showdia = false">Cancel</el-button>
        <el-button type="primary" @click="saveoption()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as monaco from "monaco-editor";

import { Base64 } from "js-base64";

export default {
  components: {},
  data() {
    return {
      lunxuncheck: "",
      lunxunpath: "",
      lunxunpinlv: "",
      websockcheck: "",
      wspath: "",
      editor: "",
      configval: "",
      showdia: false,
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    saveoption() {
      if (!_.has(this.$store.state.editer.editeractived, "componentDetail")) {
        this.$store.state.editer.editeractived["componentDetail"] = {};
      }
      this.$store.state.editer.editeractived.componentDetail["options"] =
        this.editor.getValue();
      this.showdia = false;
    },
    test() {
      console.log(this.$parent.$parent.$parent);
    },
    showdialog() {
      this.showdia = true;
      if (
        _.has(this.$store.state.editer.editeractived, "componentDetail") &&
        _.has(this.$store.state.editer.editeractived.componentDetail, "options")
      ) {
        this.configval =
          this.$store.state.editer.editeractived["componentDetail"]["options"];
      }

      if (this.editor != "") {
        this.editor.setValue(this.configval);
      } else {
        setTimeout(() => {
          this.initEditor();
        }, 0);
      }
    },
    initEditor() {
      // 初始化编辑器，确保dom已经渲染
      this.editor = monaco.editor.create(
        document.getElementById("container2"),
        {
          value: this.configval, //编辑器初始显示文字
          language: "javascript", //语言支持自行查阅demo
          automaticLayout: true, //自动布局
          theme: "vs-dark", //官方自带三种主题vs, hc-black, or vs-dark
        }
      );
    },
    getValue() {
      this.editor.getValue(); //获取编辑器中的文本
    },
  },
};
</script>
<style lang='scss' scoped>
</style>